Un mapa de calor web es una capa de colores sobre una página que muestra dónde hacen clic, hasta dónde se desplazan y por dónde mueven el cursor tus visitantes. Los tonos cálidos marcan las zonas con más actividad y los fríos, las que apenas reciben interacción. Sirve para ver qué hace la gente en una página concreta, no para saber por qué lo hace, y ahí está la diferencia entre usarlo bien o sacar conclusiones equivocadas.
En esta guía te explicamos qué tipos existen, cómo se lee cada uno, cómo se instala, qué errores de interpretación conviene evitar y qué debes revisar en España en materia de cookies y privacidad.
En resumen
- Un mapa de calor (o heatmap) agrega las interacciones de muchos usuarios en una página y las pinta con colores: rojo y naranja para mucha actividad, azul y verde para poca.
- Los tipos más útiles son el mapa de clics, el de desplazamiento, el de movimiento y el de zonas, y cada uno responde a una pregunta distinta.
- Un mapa de calor describe comportamiento, no motivaciones: una zona roja puede ser interés o confusión. Contrasta siempre con analítica y pruebas.
- Se instala con un script en el código de la web. Hay opciones gratuitas, pero debes informar al usuario y revisar si necesitas su consentimiento.
- Se obtienen mejores resultados cuando cada mapa responde a una hipótesis concreta, como “nadie ve el botón de contacto”.
Tabla de contenidos
- Qué es un mapa de calor web y qué significan sus colores
- Tipos de mapas de calor y qué responde cada uno
- Para qué sirven los mapas de calor en UX
- Cómo se crea un mapa de calor web
- Cómo interpretar un mapa de calor sin equivocarte
- Privacidad y cookies en España
- Nuestra experiencia con los mapas de calor
- Cómo te ayudamos en DobleO
- Preguntas frecuentes
- Fuentes
Qué es un mapa de calor web y qué significan sus colores
Un mapa de calor web es una representación gráfica que superpone un código de colores sobre una página para mostrar los niveles de interacción de los usuarios, tal como lo describe GoDaddy. Lo que se mide son clics, desplazamientos, tiempo de permanencia o movimientos del cursor, y el resultado se ve encima de tu propia página, de modo que identificas a simple vista qué elementos funcionan y cuáles pasan desapercibidos.
La convención de colores es sencilla. HubSpot explica que, normalmente, los rojos, naranjas y amarillos representan más actividad y los verdes y azules, menos. Shopify añade que el software suele ordenar los datos de rojo (más interacción) a azul (menos), con amarillo y verde para los niveles intermedios.
Hay un matiz que mucha gente pasa por alto: la escala no está estandarizada. Wingify recuerda que los colores pueden variar según la herramienta, así que lo primero al abrir un mapa es mirar su leyenda. Un rojo en una herramienta puede equivaler a cientos de clics y en otra, a un porcentaje relativo dentro de la misma página.
De dónde salen los datos
El mapa no es una foto de una sola visita. Agrega las interacciones de todas las sesiones registradas durante un periodo y las proyecta sobre la página. Por eso importa el volumen: con pocas visitas, un par de usuarios despistados pueden dibujar un patrón que no existe.
El mapa de calor es una pieza más dentro de las plataformas de analítica para agencias y equipos de marketing, y rinde más cuando se cruza con datos de tráfico, fuentes y conversiones. Por sí solo cuenta qué pasa en una página, no cuánto vale esa página para el negocio.
Tipos de mapas de calor y qué responde cada uno
Los principales tipos son los mapas de clics, de desplazamiento, de movimiento y por zonas, según la guía de Contentsquare. Cada uno contesta una pregunta distinta, y conviene no mezclarlos.
| Tipo | Qué muestra | Pregunta que responde | Uso típico |
|---|---|---|---|
| Clics | Dónde se hace clic o toque | ¿Qué elementos llaman la atención y cuáles se ignoran? | Revisar botones, menús, imágenes |
| Desplazamiento (scroll) | Hasta dónde baja la gente | ¿Dónde se pierde el interés? | Colocar la llamada a la acción |
| Movimiento | Por dónde pasa el cursor | ¿Qué zonas se exploran? | Pistas de atención en escritorio |
| Por zonas | Interacción de cada sección | ¿Qué bloque aporta más? | Ordenar secciones de una landing |
| Clics de rabia | Clics repetidos en un punto | ¿Dónde hay frustración? | Detectar fallos y falsos botones |
Mapa de clics
Es el más fácil de leer. Según Shopify, en un mapa de clics las zonas rojas suelen significar muchos clics, las azules pocos y las zonas sin color, ninguno. Lo más valioso suele ser lo inesperado: un texto o una imagen que recibe clics sin ser un enlace indica que el usuario espera que lo sea. Y un botón principal en azul frío indica que no está cumpliendo su función.
Mapa de desplazamiento
Muestra hasta dónde llega la gente. Siguiendo a Shopify, el paso de rojo a amarillo y a azul puede indicar dónde decae el interés o se abandona el scroll. Es el mapa que mejor ayuda a decidir dónde poner un formulario, una oferta o una llamada a la acción: no sirve de nada un botón perfecto en una zona que el 70 % de los visitantes nunca ve. Si quieres ir más allá de la página, en nuestra guía sobre cómo optimizar una landing page tienes los elementos que conviene revisar.
Mapa de movimiento
Registra por dónde pasa el cursor. Es útil como pista de atención, pero con cautela: Arimetrics advierte de que el movimiento del ratón no reproduce exactamente la mirada, y de que en móvil, donde no hay cursor, este mapa pierde sentido.
Clics de rabia y puntos de frustración
Los mapas de clics con rabia señalan puntos donde los usuarios hacen clic repetidamente en elementos que parecen clicables pero no lo son, y Contentsquare los relaciona con funciones defectuosas, páginas lentas o diseños confusos. Si ves uno, la causa puede estar en el diseño o en el rendimiento. Para lo segundo, revisa nuestra guía de cómo optimizar la velocidad web.
Para qué sirven los mapas de calor en UX
En UX, un mapa de calor sirve para tres cosas muy concretas. We.Inc las resume así: identificar áreas ignoradas, ajustar la ubicación de una llamada a la acción según el desplazamiento y detectar elementos rotos o lentos.
1. Encontrar lo que nadie ve. Un bloque entero que no recibe interacción es un candidato a rediseñarse, moverse o eliminarse. A menudo se trata de contenido que pensábamos importante y que el usuario ni siquiera alcanza.
2. Reordenar la página según la atención real. Si el mapa de scroll muestra que la mayoría abandona a mitad de página, lo importante debe subir. Es un cambio barato y medible.
3. Detectar fricción. Clics repetidos, enlaces falsos, menús que no se abren en móvil. Son problemas que la analítica numérica solo refleja como una tasa de rebote alta, sin decir dónde está el fallo.
El análisis de comportamiento encaja en el trabajo más amplio de usabilidad. ESDESIGN Barcelona señala que los mapas de calor ayudan a detectar patrones de comportamiento, áreas de interés y problemas de diseño, y recomienda interpretarlos junto con pruebas de usabilidad, métricas y comentarios de usuarios. Es justo el enfoque que defendemos: el mapa abre la pregunta y otras fuentes la cierran.
Un ejemplo de uso paso a paso
Imagina una landing de captación de leads con un formulario al final y una tasa de conversión baja. El proceso razonable sería:
- Mirar en analítica cuánta gente llega a esa página, desde qué dispositivos y con qué tasa de conversión.
- Abrir el mapa de desplazamiento por dispositivo y comprobar qué porcentaje llega al formulario.
- Si la mayoría abandona antes, subir el formulario o añadir una llamada a la acción más arriba.
- Abrir el mapa de clics y ver si el botón recibe clics o si la gente pulsa en elementos que no son enlaces.
- Cambiar una cosa cada vez, medir la conversión durante un periodo comparable y decidir.
Con ese orden evitas el error más típico: rediseñar la página entera por una intuición. Si lo que te preocupa es la conversión en general, tienes más ideas en cómo mejorar la tasa de conversión sin comprar más tráfico.
Cómo se crea un mapa de calor web
La mayoría de las herramientas funciona de la misma manera: te dan un fragmento de código, un script, que se inserta en el HTML de la web. Así lo indica GoDaddy: los mapas registran y agregan las interacciones para mostrarlas visualmente sobre la página. En WordPress y otros gestores de contenidos suele hacerse con un plugin o desde el gestor de etiquetas, sin tocar código a mano.
Qué conviene decidir antes de instalar
- Qué páginas medir. No hace falta mapear todo el sitio. Empieza por la página de inicio, las landings con inversión en publicidad y las páginas de producto o servicio con más tráfico.
- Qué pregunta quieres responder. “¿Se ve la llamada a la acción?” es una pregunta. “Ver qué pasa” no lo es.
- Cuánto tiempo recoger datos. Hasta tener un volumen suficiente de sesiones por dispositivo. Con poco tráfico, los patrones engañan.
- Cómo se tratan los elementos dinámicos. Carruseles, ventanas emergentes y diseños adaptables complican la lectura. Microsoft Clarity explica que agrupa los clics por elementos del DOM, y no solo por coordenadas de pantalla, para afrontar diferencias de resolución, elementos dinámicos y diseños adaptables. Es un criterio útil al comparar herramientas.
Cómo elegir herramienta
Existen herramientas gratuitas y de pago. Según la comparativa de Microsoft Clarity, Clarity es gratuita e incluye mapas de calor, grabaciones de sesiones e información sobre las interacciones, y Microsoft afirma que está preparada para GDPR y CCPA. Esa misma comparativa sitúa los planes de pago de otras soluciones del mercado entre 32 y más de 500 dólares al mes, un rango que depende del volumen de sesiones y de las funciones.
Al comparar opciones, estos son los criterios que pesan de verdad:
| Criterio | Qué mirar |
|---|---|
| Precio | Si hay plan gratuito, límite de sesiones y coste al crecer |
| Funciones | Clics, scroll, movimiento, clics de rabia, grabaciones, segmentación |
| Dispositivos | Separación de escritorio, móvil y tableta |
| Integraciones | Conexión con tu herramienta de analítica, CRM y gestor de etiquetas |
| Privacidad | Enmascarado de datos, ubicación de los datos, encaje con el RGPD |
| Impacto en velocidad | Peso del script sobre la carga de la página |
El último punto es fácil de olvidar: cada script que añades pesa. Una herramienta de análisis que ralentiza la web puede empeorar justo lo que quieres mejorar.
Cómo interpretar un mapa de calor sin equivocarte
Leer colores es lo fácil. Lo difícil es saber qué significan. Estas son las trampas más habituales.
Rojo no siempre es bueno
Varify advierte de que mucha interacción puede ser interés, pero también fricción o confusión, y de que las decisiones no deben basarse únicamente en el color. Si un enlace de “Ayuda” concentra clics en tu checkout, probablemente no sea buena señal.
Correlación no es causalidad
Según la misma fuente, un mapa de calor muestra correlación, no causalidad: una zona roja indica mucha interacción, pero no necesariamente algo positivo, y con poco tráfico pueden aparecer patrones engañosos. Por eso un mapa con 200 sesiones no debería justificar un rediseño.
El scroll no equivale a lectura
Arimetrics recuerda que el desplazamiento no garantiza que se haya leído el contenido. Alguien puede bajar rápido buscando el precio y pasar por encima de tu mejor texto.
Separa por dispositivo
La maquetación cambia entre escritorio y móvil, así que conviene separar los datos por dispositivo, como también sugiere Arimetrics. Un botón visible en un portátil puede quedar enterrado bajo tres pantallas en un móvil. Hoy buena parte del tráfico llega desde el teléfono, y analizarlo todo junto lo diluye.
Confirma los cambios
Los cambios que decidas a partir del mapa pueden confirmarse con un test A/B o con datos de conversión, tal como plantea We.Inc. Piensa en el mapa como generador de hipótesis, no como veredicto. Y para decidir qué indicadores vigilar tras el cambio, te pueden ayudar los KPIs más habituales de la analítica web.
Combínalo con investigación cualitativa
ESDESIGN Barcelona considera que el mapa de calor es una herramienta descriptiva de UX, no una explicación completa de las motivaciones del usuario, y por eso recomienda combinarlo con investigación cualitativa y métricas. Una encuesta corta, unas grabaciones de sesión o cinco pruebas de usuario aclaran en una tarde lo que el mapa solo insinúa.
Privacidad y cookies en España
Antes de instalar cualquier herramienta de análisis de comportamiento, revisa cómo trata los datos. En España, la Agencia Española de Protección de Datos (AEPD) publicó en enero de 2024 una guía sobre el uso de cookies para herramientas de medición de audiencia. Según esa guía, las cookies de estadísticas de tráfico pueden estar exentas de consentimiento solo bajo ciertas condiciones: finalidad limitada a medir la audiencia, tratamiento por cuenta exclusiva del editor y datos estadísticos anónimos, sin cotejarlos con otros tratamientos ni transmitirlos a terceros.
Traducido a la práctica:
- Informa en tu política de cookies de qué herramienta usas y para qué.
- Comprueba con tu proveedor y tu asesor legal si tu configuración cumple las condiciones de exención o si necesitas consentimiento previo.
- Si la herramienta graba sesiones, activa el enmascarado de campos con datos personales (formularios, correos, datos de pago).
- Revisa el contrato de encargado del tratamiento con el proveedor.
Las condiciones concretas dependen de la herramienta y de cómo la configures, así que para tu caso consulta a tu delegado de protección de datos o a un abogado especializado en protección de datos.
Nuestra experiencia con los mapas de calor
Los mapas de calor se han vuelto muy populares porque son visuales y fáciles de enseñar en una reunión. Ese es también su riesgo: un gráfico atractivo da sensación de certeza, y la certeza llega antes que el análisis.
En DobleO partimos de la analítica web en todas nuestras estrategias. Primero miramos los datos cuantitativos: qué páginas pierden usuarios, desde qué canal llegan y en qué dispositivo. Después usamos el mapa de calor para entender qué ocurre dentro de esas páginas. Y al final medimos si el cambio ha movido el retorno de la inversión, que es lo que le importa al negocio.
Nuestro consejo es empezar por pocas páginas, con una hipótesis clara y con una forma de medir el resultado. Un mapa de calor bien usado es una conversación con el usuario. Mal usado, es decoración.
Santiago
Cómo te ayudamos en DobleO
Si quieres que los mapas de calor sirvan para tomar decisiones y no solo para decorar un informe, podemos encargarnos del proceso completo: definir qué medir, configurar las herramientas, interpretar los datos junto con tu analítica y proponer cambios priorizados. Lo hacemos desde nuestro servicio de analítica web, que es la base de todo lo que hacemos.
Si el problema parece de usabilidad o de diseño, lo trabajamos con nuestros servicios de usabilidad y de diseño y desarrollo web. Puedes contarnos tu caso desde nuestra web y te diremos por dónde empezar.
Preguntas frecuentes
¿Qué diferencia hay entre un mapa de calor y una grabación de sesiones?
El mapa de calor agrega las interacciones de muchos usuarios en una sola imagen, y la grabación reproduce la visita de una persona concreta. El mapa te dice dónde se concentra la actividad. La grabación te ayuda a entender el contexto de un comportamiento puntual. Se usan mejor juntos.
¿Cuántas visitas necesito para fiarme de un mapa de calor?
No hay una cifra universal, pero con poco tráfico los patrones pueden ser engañosos, como advierte Varify. Conviene recoger datos hasta tener un volumen razonable de sesiones por página y por dispositivo. Si tu página recibe pocas visitas, prioriza las pruebas con usuarios y los datos de analítica.
¿Un mapa de calor sirve para mejorar el SEO?
No es una herramienta de posicionamiento, pero ayuda de forma indirecta. Te enseña si el contenido que atrae tráfico se lee y si los enlaces y llamadas a la acción se usan, y eso te permite mejorar la experiencia de las páginas que ya posicionan. Los cambios de SEO se miden en analítica y en buscadores, no en el mapa.
¿Puedo usar mapas de calor en una tienda online?
Sí, y es uno de los usos más habituales: fichas de producto, carrito y proceso de pago. Revisa especialmente el móvil y activa el enmascarado de datos personales en los formularios de compra. Después comprueba el efecto de cada cambio en la tasa de conversión.
¿Hay que informar a los usuarios de que se usa un mapa de calor?
Sí. Debes informar en tu política de cookies y de privacidad de las herramientas que usas. Si necesitas consentimiento depende de la herramienta y su configuración, según las condiciones que fija la AEPD en su guía de medición de audiencia.
Fuentes
- GoDaddy: Mapas de calor, qué son y cómo crear uno para tu web
- HubSpot: Qué es un mapa de calor, cómo interpretarlo y herramientas
- Shopify: Cómo usar un mapa de calor para mejorar tu sitio web
- Wingify: Cómo leer un heatmap
- Contentsquare: Heatmaps en analítica web
- We.Inc: Mapas de calor web
- ESDESIGN Barcelona: Mapas de calor para UX en sitios web
- Arimetrics: Qué es un mapa de calor
- Varify: Leer un mapa de calor
- Microsoft Clarity: What is a heatmap
- Microsoft Clarity: Comparative guide of behavioral analytics platforms
- AEPD: Guía sobre el uso de cookies para herramientas de medición de audiencia
Recomendaciones
- KPIs más Habituales de la Analítica Web Parte 1
- KPIs más Habituales de la Analítica Web Parte 2
- Qué es una auditoría analítica web y qué resultado entrega
